<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <style>
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      a{
        text-decoration: none;
      }
      .yidong1{
    width: 100%;
    height: 500px;
    animation-name: example;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  position: relative;

}

@keyframes example {
  0%   {bottom: 0px;}
  10%  {bottom: 100px;}
  20%  {bottom: 200px;}
  30% {bottom: 300px;}
  50% {bottom: 400px;} 
  60% {bottom: 500px;} 
  70% {bottom: 600px;} 
  80% {bottom: 700px;} 
  90% {bottom: 800px;} 
  100% {bottom: 900px;} 
}
.scroll{
  transform: translateX(1000%);
}

@font-face {
  font-family: 'iconfont';  /* Project id 3686545 */
  src: url('//at.alicdn.com/t/c/font_3686545_kzrnbxj7t4q.woff2?t=1664891560483') format('woff2'),
       url('//at.alicdn.com/t/c/font_3686545_kzrnbxj7t4q.woff?t=1664891560483') format('woff'),
       url('//at.alicdn.com/t/c/font_3686545_kzrnbxj7t4q.ttf?t=1664891560483') format('truetype');
}

  .iconfont {
  font-family: "iconfont" !important;
  font-size: 40px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.el-carousel__container {
  height: 900px !important;

}
.el-carousel__indicators--horizontal
    {
        visibility: hidden !important;
    }

    @keyframes bounceInRight {	from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}	
    /* 0% {opacity: 0;transform: translate3d(2000px, 0, 0);}	 */
    60% {-webkit-transform: translate3d(0px, 0, 0);}	
    75% {-webkit-transform: translate3d(10px, 0, 0);}	
    90% {-webkit-transform: translate3d(-5px, 0, 0);}	
    100% {-webkit-transform: none;}}

.yidong{
    /* width: auto;                                                                                                                                                                                                                                                                                                                                                                                                                                                                   */
    /* display: inline-block; */
    /* animation: 0s ease 0s 1 normal none running none; */

    animation: bounceInRight 1.5s 0s linear forwards;

}


.smallbox a div{
  color: rgb(68, 68, 68);
}
    </style>
  </head>
  <body>

    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script type="text/javascript">
      window.onload=function(){
        const boxs=document.querySelectorAll('.scroll')
        console.log(boxs);
        const triggerBottom = window.innerHeight 
    window.addEventListener('scroll', scrolls)
      scrolls()
      function scrolls(){
     for(var i=0;i<boxs.length;i++){
      const boxTop = boxs[i].getBoundingClientRect().top

        if(boxTop<triggerBottom){
              
              boxs[i].classList.add('yidong')
              }

      }
     }
     const zj=document.querySelectorAll('.zuj')
     const yi=document.querySelectorAll('.y')
     console.log(zj)
     console.log(yi)


     zj[0].addEventListener('webkitAnimationEnd',function(){
      setTimeout(function(){
        console.log('1')
        for(let i=0;i<yi.length;i++){
          yi[i].classList.add('yidong1')
        }

      },1000)

     })





         





    }



    </script>
  </body>
</html>